<template>
	<div class="kzf_simple">
		<div class="kzf_simptop">
			<div class="kzf_search">
				<input class="kzf_search2" v-model="Video_value" type="text" placeholder="请输入UP主昵称或UID进行搜索">
				<button class="kzf_search3" @click="getVideo(0, 1,Video_value)">搜索视频</button>
			</div>
			<div class="kzf_property">
				<span></span>
				<p>商业属性</p>
			</div>
			<div class="kzf_heade">
				<p>视频分类:</p>
				<button @click="num=0" :class="num==0?'active':''">全部</button>
				<div class="kzf_heade1" v-for="(item,index) in list.Category" :key="item.TId">

					<button @click="getVideo(index+1,item.TId)"
						:class="num==index+1?'active':''">{{item.TName}}</button>
				</div>

			</div>
			<br>
			<div class="kzf_heade">
				<p>视频分类:</p>
				<button @click="num=0" :class="num==0?'active':''">全部</button>
				<button @click="num=2" :class="num==2?'active':''">邀约广告</button>
				<button>品牌赞助</button>
				<button>评论置顶</button>
				<button>商品橱窗</button>
			</div>

		</div>
		<div class="kzf_homepage">
			<div style="width: 100%;height: 50px;">
				<div class="kzf_homepage1">
					<button>播放最多</button>
					<button>点赞最多</button>
					<button>收藏最多</button>
					<button>投币最多</button>
					<button>评论最多</button>
					<button>弹幕最多</button>
					<button>分享最多</button>
					<button>最新发布</button>
				</div>
				<div class="kzf_homepage2" style="position: absolute;left:1000px;">
					<button style="border-left: 1px solid #b9c3d2;">3天</button>
					<button>7天</button>
					<button>30天</button>
					<button>自定义</button>
				</div>
				<!-- 日期 -->
				<div class="block">
					<el-date-picker v-model="value1" type="monthrange" range-separator="至" start-placeholder="开始月份"
						end-placeholder="结束月份">
					</el-date-picker>
				</div>
			</div>
			<!-- 内容头 -->
			<div class="kzf_homepage2">
			<!-- 	<div class="kzf_homepage_top">
					<p style="margin-left:30px; width: 980px;">视频信息</p>
					<p style="width: 240px;">视频分区</p>
					<p style="width: 240px">推广品牌</p>
					<p style="width: 80px">推广形式</p>
				</div> -->
				<!-- <div class="kzf_homepage3" v-for="item in video.ItemList" :key="item.BloggerId">
					<img :src="'/bfs'+item.LogoUrl.substr(23)" width="160px" height="105px" alt="">
					<p></p>
					<p></p>
					<p></p>
					
				</div> -->

				<!-- 视频信息统计 -->
				<div class="shi_pin_xin">
					<ul>
						<li style="width: 640px;margin-right: 80px;">视频信息</li>
						<li style="margin-right: 40px; width: 120px;">视频分区</li>
						<li style="margin-right: 40px;">播放数</li>
						<li style="margin-right: 40px;">点赞数</li>
						<li style="margin-right: 40px;">收藏数</li>
						<li style="margin-right: 40px;">投币数</li>
						<li style="margin-right: 40px;">评论数</li>
						<li style="margin-right: 40px;">弹幕数</li>
						<li>分享数</li>
					</ul>
					<ul v-for="item in video.ItemList" :key="item.BloggerId" class="details">
						<li style="width: 640px;margin-right: 80px;">
							<div class="video_detailed">
								<div style="position: relative;">
									<img :src="'/bfs'+item.LogoUrl.substr(23)" style="width: 160px; height: 100px;">
									<span
										style="position: absolute; bottom: 0; right: 0; width: 40px; height: 20px; background: rgba(0,0,0,0.6); color: #FFFFFF; line-height: 20px;text-align: center;">{{item.Duration}}</span>
								</div>
								<div class="video_message">
									<p>{{item.Title}}<span>{{item.CopyRight}}</span></p>
									<p class="brief">简介：{{item.Description}}</p>
									<p class="f12">{{item.Author}}</p>
									<p style="color: #999999;font-size: 12px;">发布于 {{item.PubTime}}</p>
								</div>
							</div>
						</li>
						<li style="margin-right: 40px;width: 120px;">{{item.Category}}</li>
						<li style="margin-right: 40px;">{{item.ViewCount|moneyFormat}}</li>
						<li style="margin-right: 40px;">{{item.LikeCount|moneyFormat}}</li>
						<li style="margin-right: 40px;">{{item.FavoriteCount|moneyFormat}}</li>
						<li style="margin-right: 40px;">{{item.CoinCount|moneyFormat}}</li>
						<li style="margin-right: 40px;">{{item.ReplyCount|moneyFormat}}</li>
						<li style="margin-right: 40px;">{{item.DanmuCount|moneyFormat}}</li>
						<li>{{item.ShareCount|moneyFormat}}</li>
					</ul>
				</div>


			</div>

		</div>
	</div>
</template>

<script>
	import {
		Simple,
		Video
	} from '@/api/simple.js'
	export default {
		data() {
			return {
				list: {},
				num: 0,
				video: {},
				Video_value: "", //输入框
				pickerOptions: {
					shortcuts: [{
						text: '本月',
						onClick(picker) {
							picker.$emit('pick', [new Date(), new Date()]);
						}
					}, {
						text: '今年至今',
						onClick(picker) {
							const end = new Date();
							const start = new Date(new Date().getFullYear(), 0);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近六个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setMonth(start.getMonth() - 6);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				value1: '',
				value2: ''
			}
		},
		created() {
			Simple({
					'r': 0.14837987485080162,
				})
				.then(res => {
					console.log(res.data)
					this.list = res.data.Data;
					console.log("1", this.list)
				})
				.catch(err => console.error(err))
			this.getVideo();
		},
		methods: {
			getVideo(index = 0, tid = 0, KeyWord = "") {
				this.num = index;
				console.log(index, tid);
				var user = tid == 0 ? tid : {
					'r': 0.4240117162533925,
					"tid": tid,
					"KeyWord": KeyWord,
					'SortType': 8,
					'PageIndex': 1,
					'PageSize': 10,
					'BeginCode': 20220731,
					'EndCode': 20220806,
					'isBusiness': true
				}
				if (tid != 0) {
					Video(user)
						.then(res => {
							console.log(res.data)
							this.video = res.data.Data;
							console.log("1", this.video)
							return;
						})
						.catch(err => {
							console.error(err)
							return;
						})
				} else if (KeyWord != "") {
					Video(user)
						.then(res => {
							// console.log(res.data)
							this.video = res.data.Data.ItemList;
							// this.Video_value = ""
							console.log("2", res.data.Data.ItemList);
							return;
						})
						.catch(err => {
							console.error(err)
							this.Video_value = "";
							return;
						})
				} else {
					Video({
							'r': 0.4240117162533925,
							'SortType': 8,
							'PageIndex': 1,
							'PageSize': 10,
							'BeginCode': 20220731,
							'EndCode': 20220806,
							'isBusiness': true
						})
						.then(res => {
							console.log(res.data)
							this.video = res.data.Data;
							console.log("3", this.video)

						})
						.catch(err => {
							console.error(err);
						})
				}

			}
		}
	}
</script>
<style>
	.kzf_simple .el-date-editor {
		width: 230px;

	}

	.kzf_simple .el-range-separator {
		display: inline-block;
		width: 20px;
	}
</style>
<style scoped="scoped">
	/*  */
	.brief {
			color: #999999;
			font-size: 12px;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			width: 100%;
		}
	/* 视频详情 */
		.video_detailed {
			display: flex;
			flex-direction: row;
		}
	
		.video_detailed .video_message {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding-left: 10px;
		}
	
		.video_message p:nth-child(1) {
			font-size: 16px;
			color: #000000;
			font-weight: 600;
			line-height: 20px;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			width: 100%;
		}
	
		.video_detailed .video_message p span {
			font-weight: 400;
			color: #8798ad;
			font-size: 12px;
			border: 1px solid #8798ad;
			padding: 2px 7px;
		}
	
	.shi_pin_xin ul {
			display: flex;
			flex-direction: row;
		}
	
		.shi_pin_xin ul li {
			width: 100px;
		}
	
		.shi_pin_xin ul:nth-child(1) {
			background-color: #f7f8fa;
			height: 50px;
			line-height: 50px;
			margin: 10px 0;
			font-size: 14px;
			padding: 0 10px;
			border: none;
		}
		.shi_pin_xin ul:not(:first-child) {
			padding-bottom: 10px;
			border-bottom:  1px solid #ebeef5;
		}
		.shi_pin_xin ul li:not(:first-child){
			text-align: center;
		}
		
		.shi_pin_xin .details:hover{
			box-shadow: #dbdee3 0px 0px 5px 0px; 
		}
		.details{
			padding-top: 10px;
		}
		.details li:not(:first-child){
			line-height: 100px;
		}
	
	
	/* .kzf_simple{
		min-width: 1800px;
	} */
	.active {
		color: #5830a0;
	}

	.kzf_simptop {
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding-top: 20px;
		padding-left: 20px;
	}

	.kzf_search {
		display: block;

		width: 490px;
		height: 38px;

	}

	.kzf_search2 {
		width: 372px;
		height: 38px;
		border: 1px solid #b9c3d2;
		padding-left: 10px;
		border-radius: 2px 0 0 2px;
		border-right: 0;
	}

	.kzf_search3 {
		width: 104px;
		background-color: #5830a0;
		height: 38px;
		border: 1px #b9c3d2 solid;
		vertical-align: middle;
		border-radius: 0 4px 4px 0;
		color: #fff;
		font-size: 17px;
	}

	.kzf_property>p {
		display: inline-block;
		vertical-align: middle;
		margin-left: 10px;
		margin-top: 20px;
	}

	.kzf_property>span {
		display: inline-block;
		width: 4px;
		height: 14px;
		margin-top: 20px;
		background-color: #5830a0;
		vertical-align: middle;
	}

	.kzf_heade {
		margin-top: 10px;
		height: 50px;
	}

	.kzf_heade>p {
		display: inline-block;
		float: left;
		margin-right: 25px;
		font-size: 14px;
		line-height: 18px;
	}

	.kzf_heade>button {
		display: inline-block;
		float: left;
		-left: 25px;
		margin-right: 25px;
		border: 0;
		background-color: #fff;
	}

	.kzf_heade1 {
		width: 100%;
		background-color: #5830a0;

	}

	.kzf_heade1 button {
		display: inline-block;
		float: left;
		margin-right: 25px;
		border: 0;
		background-color: #fff;
		line-height: 20px;
	}

	/* 主页 */
	.kzf_homepage {
		width: 1700px;
		height: 100%;
		background-color: #fff;
		padding-top: 20px;
		padding-left: 15px;
		padding-right: 15px;
		position: relative;
	}

	.kzf_homepage1 {
		width: 600px;
		float: left;
	}

	.kzf_homepage1 button,
	.kzf_homepage2 button {
		width: 70px;
		height: 22px;
		border: 1px solid #b9c3d2;
		background-color: #fff;
		border-left: 0;
	}

	.kzf_homepage2 button {
		height: 27px;

	}

	.kzf_homepage1 button:nth-child(1) {
		border-left: 1px solid #b9c3d2;
	}

	.block {
		position: absolute;
		right: 150px;
		top: 13px;
	}

	.kzf_homepage2 {

		height: 100%;
	}

	.kzf_homepage_top {
		width: 100%;
		height: 42px;
		background-color: #f7f8fa;
		font-size: 14px;
		line-height: 42px;
	}

	.kzf_homepage_top>p {
		float: left;
		width: 1700px;
	}

	.kzf_homepage3 {
		width: 100%;
		height: 173px;
	}
</style>
